<template>
  <div class="container" @mouseover="setIsHoverTrue" @mouseout="setIsHoverFalse">
    <el-card class="orgCard" shadow="hover">
      <div slot="header" class="header">
        <span>{{org.org_name}}</span>
      </div>
      <div class="body">
        <div class="description">{{org.org_description}}</div>
        <div class="create_date">{{"创建时间："+createDate}}</div>
        <el-button class="Card_button"  type="text" @click="joinorg">加入组织</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import moment from 'moment';
import axiosinstance from "@/util/http";

export default {
  name: "orgCard",
  computed:{
    createDate:function (){
      if(this.isHover)return moment(this.org.createdAt).format('YYYY-MM-DD HH:mm');
      else  return moment(this.org.createdAt).format('MM-DD HH:mm');
    },
  },
  props: {
    org:{
      type:Object,
      default: function () {

      }
    }
  },
  data() {
    return{
      isHover:false,
    }
  },
  methods:{
    setIsHoverTrue(){
      this.isHover = true;
    },
    setIsHoverFalse(){
      this.isHover = false;
    },
    async joinorg(){
      this.user = this.$store.getters.getuser;
      console.log("efa", this.user);
     this.org_id=this.org.id;
      console.log("afafqa", this.org_id);
      let res = await axiosinstance({
        url: '/organization/joinorganization',
        method: 'post',
        data:{ 
          org_id: this.org_id,
          username: this.user.username,
        }
      });
      if(res){
        if(res.data.status == 1){
          this.$message({
          showClose: true,
          message: '已加入该组织',
          type: 'err'
         });
        }
        if(res.data.status == 0){
          this.$message({
          showClose: true,
          message: '加入成功',
          type: 'success'
        });
        }

      }
      else{
        this.$message({
          showClose: true,
          message: '加入失败',
          type: 'err'
        });
      }
    }
  }

}
</script>

<style scoped lang="less">
  .container{
    margin:0;
    height:inherit;
    width:100%;
    padding:0;
    .orgCard{
      height:inherit;
      border:2px solid rgb(255, 255, 255);
      border-radius:35px;
      //transition: all 250ms cubic-bezier(.02, .01, .47, 1);
      transition-delay: 0.04s;
      transition-duration:0.7s;
      &:hover{
        transform: translate(0,-5px);
        border-radius:15px;
        transition-delay: 0.13s;
        transition-duration:0.7s;
      }
      .header{

      }
      .body{
        .description{
          overflow:hidden;
          display:block;
          height:100%;
          width:100%;

        }
        .create_date{

        }
      }
    }

  }


</style>